<md-dialog aria-label="Create" class="form-dialog" ng-cloak>
  <form name="form" class="form-horizontal" ng-submit="submit()" onvalidate>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2 translate="ADMIN_USER_CREATE_MODAL_TITLE"></h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon class="fa fa-times-circle" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <md-content layout-padding>
        <md-input-container class="md-block" flex-gt-sm>
          <label translate="ADMIN_USER_NAME"></label>
          <input type="text" name="userName" ng-model="user.name" required>
          <div ng-messages="form.userName.$error" ng-if="form.userName.$dirty">
            <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
          </div>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label translate="ADMIN_USER_EMAIL"></label>
          <input type="text" name="email" ng-model="user.email" required>
          <div ng-messages="form.email.$error" ng-if="form.email.$dirty">
            <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
          </div>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label translate="ADMIN_USER_PHONE"></label>
          <input type="text" name="phone" ng-model="user.phone" required>
          <div ng-messages="form.phone.$error" ng-if="form.phone.$dirty">
            <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
          </div>
        </md-input-container>
        <div layout="row">
          <md-input-container flex="20" class="md-block">
          <label>{{ 'ADMIN_USER_MESSAGE_TYPE' | translate }}</label>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <md-checkbox ng-model="user.enableEmail" ng-init="user.enableEmail=true" aria-label="checked checkbox">
              {{ 'ADMIN_USER_ENABLE_EMAIL' | translate }}
            </md-checkbox>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <md-checkbox ng-model="user.enablePhone" ng-init="user.enablePhone=true" aria-label="checked checkbox">
              {{ 'ADMIN_USER_ENABLE_PHONE' | translate }}
            </md-checkbox>
          </md-input-container>
        </div>
        <div layout="row">
          <md-input-container flex="20" class="md-block">
            <label>{{ 'ADMIN_USER_IS_UNIVERSAL' | translate }}</label>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <md-checkbox ng-model="user.universal">
              {{ 'ADMIN_USER_UNIVERSAL' | translate }}
            </md-checkbox>
          </md-input-container>
        </div>
        <div layout="row">
          <md-input-container flex="20" class="md-block">
            <label>{{ 'ADMIN_USER_RULE_LEVEL' | translate }}</label>
          </md-input-container>
          <md-input-container flex="80" class="md-block">
            <md-radio-group ng-model="user.ruleLevel" layout="row">
              <md-radio-button ng-value="0" ng-init="user.ruleLevel=0"> {{ 'ADMIN_USER_RULE_LEVEL_LOW' | translate }} </md-radio-button>
              <md-radio-button ng-value="1"> {{ 'ADMIN_USER_RULE_LEVEL_MIDDLE' | translate }} </md-radio-button>
              <md-radio-button ng-value="2"> {{ 'ADMIN_USER_RULE_LEVEL_HIGH' | translate }} </md-radio-button>
            </md-radio-group>
          </md-input-container>
        </div>
      </md-content>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-button ng-click="cancel()" translate="CANCEL"></md-button>
      <md-button md-no-ink class="md-primary" ng-disabled="form.$invalid" type="submit" translate="SUBMIT"></md-button>
    </md-dialog-actions>
  </form>
</md-dialog>
